<template>
  <div class="index">
      <van-tabs swipeable v-model="channelId">
        <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :name="channel.id"
        :title="channel.name">
          <article-list
          :channel="channel"
          @showMoreAction="hShowMoreAction"></article-list>
        </van-tab>
      </van-tabs>
      <!-- 频道列表 开关 通过定位 -->
      <div v-if="$store.state.tokenInfo.token" class="bar-btn" @click="showChannelEdit=true">
          <van-icon name="wap-nav"/>
      </div>
      <!-- 弹层 -->
      <van-popup v-model="showMoreAction" :style="{ width: '80%' }">
        <more-action
        ref="refMoreAction"
        @dislike="hDislike"
        @report='hReport'
        ></more-action>
      </van-popup>

      <!-- 编辑频道弹出层 -->
      <van-action-sheet v-model="showChannelEdit" title="标题">
        <channel-edit
        :channels="channels"
        :channelId="channelId"
        @updateCurChnnel="hUpdateCurChannel"
        @updateCurIndex="hUpdateCurIndex"
        ></channel-edit>
      </van-action-sheet>
  </div>
</template>

<script>
import ChannelEdit from './channelEdit'
import { getChannels } from '@/api/channel'
import { dislikeActicle, reportArticle } from '@/api/article.js'
import MoreAction from './moreAction'
import ArticleList from './articleList'
export default {
  name: 'home',
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      showChannelEdit: false, // 是否显示频道编辑弹层
      channels: [], // 当前用户的频道列表
      showMoreAction: false, // 是否显示弹层
      articleId: null, // 点击弹层 当前弹层的id
      channelId: '' // 表示当前选中的频道标号
    }
  },
  created () {
    this.loadChannels()
  },
  // 获取用户频道
  methods: {
    // 解决删除我的频道时，出现的小bug
    hUpdateCurIndex (idx) {
      this.channelId = idx
    },
    // 处理子组件channelEdit中用户在我的频道上点击的动作
    hUpdateCurChannel (channel) {
      // 1 . 关闭 我的频道 弹层
      this.showChannelEdit = false
      // 2 . 切换频道列表到 当前频道上去
      this.channelId = channel.id
    },
    // 处理弹层选择的 举报文章
    async hReport (reportTypeId) {
      console.log(111)
      // 调用后端接口
      const res = await reportArticle(this.articleId, reportTypeId)
      console.log(res)
      // 关闭弹层
      this.showMoreAction = false
      // 通知文章列表去删除被点击的文章
      this.$eventBus.$emit('delArticle',
        {
          articleId: this.articleId,
          channelId: this.channelId
        })
      console.log('22222', this.$refs.refMoreAction)
    },
    // 处理子组件moreAction抛出的事件
    // 不感兴趣
    async hDislike () {
      // 调接口
      const result = await dislikeActicle(this.articleId)
      console.log(result)
      // 退出弹层
      this.showMoreAction = false
      // 通知文章列表去删除那个被点击的文章
      const obj = {
        channelId: this.channelId,
        articleId: this.articleId
      }
      this.$eventBus.$emit('delArticle', obj)
    },
    // 处理子组件抛出的显示弹层
    hShowMoreAction (articleId) {
      // 保存传递过来的id
      this.articleId = articleId
      console.log('子组件传递过来的文章id是：', articleId)
      // 显示弹层
      this.showMoreAction = true
      // 重置moreAction中的isShowAction  点开第一个的弹层的时候让第二个弹层设置为false
      console.log('这个是：', this.$refs.refMoreAction)
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isShowAction = false
      }
    },
    async loadChannels () {
      const res = await getChannels()
      console.log(res)
      this.channels = res.data.data.channels
    }
  }
}
</script>

<style lang="less" scoped>
.bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
